<template>
  <div class="index">
    <div class="page-header-main">
      <div class="page-title">
        我发布的任务列表
      </div>
    </div>

    <div class="page-infinite task-main" style="text-align: left;">
      <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
        <ul class="page-infinite-list"
          v-infinite-scroll="loadMore"
          infinite-scroll-disabled="loading"
          infinite-scroll-distance="50"
          style="margin: 0; padding-left: 20px; padding-right: 20px; padding-bottom: 50px;"
        >
          <li v-for="item in taskList" class="page-infinite-listitem task-item" @click="taskDetail(item.id)">
            <div class="task-title">
              {{ item.name }}
            </div>
            <div class="task-value">
              {{ taskStation[item.station] }}
            </div>
            <div class="task-desc">
              {{ item.describe }}
            </div>

            <div class="task-station">
              ¥ {{ item.task_value }}
            </div>
          </li>
        </ul>
        <p v-show="loading" class="page-infinite-loading" style="text-align: center;">
          加载中...
        </p>

        <p v-show="emptyList" class="page-infinite-loading" style="text-align: center;">
          暂无数据
        </p>
      </div>
    </div>

    <tab-bar></tab-bar>

  </div>
</template>

<script>
import axios from 'axios';
import tabBar from './common/TabBar';
import storeItem from '../utils/store';

export default {
  name: 'index',
  data() {
    return {
      taskList: [],
      loading: false,
      emptyList: false,
      allLoaded: false,
      wrapperHeight: 0,
      lastId: 0,
      loadDisable: true,

      taskStation: {
        1: '等待审核',
        2: '等到反馈',
        3: '已反馈',
        4: '报名中',
        5: '执行中',
        6: '已完成',
      },
    };
  },
  methods: {
    loadMore() {
      if (this.loadDisable === false) {
        return;
      }

      this.loading = true;
      axios.get('/task/get_publish_task', {
        params: {
          last_id: this.lastId,
          token: storeItem.getItem('token'),
        },
      }).then((response) => {
        if (response.status === 200) {
          if (response.data.status === true &&
            response.data.message > 0 && response.data.data.length > 0) {
            this.lastId = response.data.message;
            this.taskList = this.taskList.concat(response.data.data);
          } else {
            this.loadDisable = false;
            this.emptyList = true;
          }
          this.loading = false;
        }
      });
    },
    taskDetail(id) {
      this.$router.push({
        name: 'Detail',
        params: {
          taskId: id,
        },
      });
    },
  },
  mounted() {
    this.wrapperHeight =
      document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
  },
  components: {
    'tab-bar': tabBar,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
a {
  color: #42b983;
}

.index {
  margin-top: -40px;
}

.task-filter {
  margin-right: 30px;
  float: right;
  width: 30px;
  height: 30px;
}
.task-item {
  border-bottom: solid 1px #eee;
  padding: 10px;
}
.task-title {
  font-size: 18px;
  display: inline-block;
  width: 60%;
}
.task-value {
  display: inline-block;
  float: right;
  color: #42b983;
  font-size: 20px;
}
.task-desc {
  font-size: 12px;
  width: 80%;
  display: inline-block;
}
.task-station {
  float: right;
}

</style>
